<template>
  <div class="about">
    <router-link to="/loadmd/readme">
      <div class="kn">
        <img src="../assets/img/kn.jpeg">
      </div>
      
      <div>Click here to know more about me</div>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  .kn{
    width: 200px;
    display: block;
    margin: 20px auto;
    position: relative;
    
  }
  .kn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow:0px 0px 50px 10px #f8f8ff inset;
  }
  img{
    width: 100%;
  }
  div{
    text-align: center;
    cursor: pointer;
  }
}

</style>
